<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪类选择器</title>
    <style type="text/css">
        .weilei a:link {color: #666;}
        a:visited {color: red;} /*点击过后*/
        a:hover {color: #000;}  
        a:active{color: yellow;}

        input:enabled{background: green}
        input:disabled{background: red}
        .clearfix {
            clear: both;
            overflow: auto;
        }
        .weilei2-ul {
            font-style: normal;
            font-size: 18px;
            width: 300px;
            padding: 10px;
            border: 1px solid #666;
            list-style: none;
        }
        .weilei2-ul li {
            float: left;
            padding: 0 10px;
        }
        .weilei2-ul li a {

        }
        .weilei2-ul li a:nth-child(n+5){
            color: red;
        }
        .weilei2-ul li a:nth-of-type(3) {
            /* nth-of-type:限定标签 */
        }
        li:only-child {
            /* 只有一个时候起作用 */
        }
        li:empty {
            /* 里面没有一个元素 */
        }
        /* 伪元素 */
        li::first-letter{
            /* 元素内一个个字 */
        }
        li::first-line {
            /* 元素内第一行 */
        }
        li::before{
            content: "";
            /* 在内容前面 */
        }
        li::after {
            /* 在内容后 */
            border-top-left-radius: 100px 50px;
            /* 对应X，Y */
        }
    </style>
</head>
<body>
    <div class="weilei">
        伪类选择器
        <hr>
        <br>
        <a href="#">a标签的选择</a>
        <input type="text">
        <input type="text" disabled>
    </div>
    <div class="weilei2">
        结构伪类选择器
        <hr>
        <ul class="weilei2-ul">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
        </ul>
    </div>
</body>
</html>